<template>
  <div id="boat-detail-content" style="background: #fff; min-height: 2999px">
    <Affix>
      <div  class="detail_header" >
        <ul class="detail_index_ul">
          <li>综述</li>
          <li>详情</li>
          <li>周边</li>
        </ul>
      </div>
    </Affix>
    <Affix :offset-top="50">
      <div class="book_it">
        <div class="book_it_price">
          <span>￥880</span>
        </div>
        <div class="book_it_panel">
          <div class="book_it_panel_body">
            <row>
              <i-col span="12">
                开始时间
              </i-col>
              <i-col span="12">
                结束时间
              </i-col>
            </row>
            <row>
              <i-col span="12">
                <Date-picker type="date" placeholder="选择日期" ></Date-picker>
              </i-col>
              <i-col span="12">
                <Date-picker type="date" placeholder="选择日期" ></Date-picker>
              </i-col>
            </row>
            <row style="padding-top: 10px; padding-bottom: 10px">
              <i-col span="24">
                游客人数
              </i-col>
              <i-col span="24">
                <Select v-model="touristNumModel" >
                  <Option v-for="item in touristNumber" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
              </i-col>
            </row>
            <div class="book_it_demons">
              其他费用：<Tooltip>
              <Icon type="help-circled"></Icon>
              <div slot="content">
                <p>不同服务商地接费用、登船费用不包含在内</p>
              </div>
            </Tooltip>
              <a style="float: right; color:#4c4c4c; font-weight: bolder;font-size: 14px;">
                ￥0
              </a>
            </div>
            <!--div class="book_it_demons">
                平台服务费：
                <Tooltip>
                  <Icon type="help-circled"></Icon>
                  <div slot="content">
                    <p>服务费可以帮助我们维持平台的运行</p>
                    <p>同时为您提供24小时支持服务</p>
                  </div>
                </Tooltip>
              <a style="color:#4c4c4c;font-weight: bolder;font-size: 14px; float: right">￥100</a>
            </div-->
            <div class="book_it_price_total">
              <div class="book_it_price_total_left">
                <a style="color: #ff5a5f;font-weight: bolder;font-size: 16px;">合计</a>
              </div>
              <div class="book_it_price_total_right">
                <a>￥888</a>
              </div>
            </div>
              <button type="submit" class="button-submit">
                <span class="button-title-large">下单</span>
                <i class="fa fa-angle-right" style="float:right; padding-top:5px"></i>
              </button>
            <button type="submit" class="button-submit-orange">
              <span class="button-title-large">加入购物车</span>
              <i class="fa fa-angle-right" style="float:right; padding-top:5px;"></i>
            </button>
          </div>
        </div>
      </div>
    </Affix>
    <div class="summary_info">
      <div>
      <span class="summary-sku-name">{{this.boatInfo.name}}</span>
      </div>
      <div class="summary-loc-reviews">
        <span v-for="locItem in this.boatInfo.locations" class="summary-location">{{locItem}} /</span>
        <a class="review" href="#">
          <Rate show-text allow-half v-model="starRate">
            <span style="color: #2d8cf0; font-size: 12px">13 reviews</span>
          </Rate>
        </a>
      </div>
      <div class="summary-specs">
        <div class="m" data-toggle="tooltip" data-placement="top" data-delay="500" title="" data-original-title="Capacity">
          <span class="cap">Capacity</span> {{this.boatInfo.capacity}}人
        </div>
        <div class="m" data-toggle="tooltip" data-placement="top" data-delay="500" title="" data-original-title="Cabins">
          <span class="cab">Cabins</span> {{this.boatInfo.cabNumbers}} 客舱
        </div>
        <div class="m" data-toggle="tooltip" data-placement="top" data-delay="500" title="" data-original-title="Berths">
          <span class="ber">Berths</span>{{this.boatInfo.beds}}床位</div>
        <div class="m" data-toggle="tooltip" data-placement="top" data-delay="500" title="" data-original-title="Engine">
          <span class="mot">Engine</span> 2x30hp</div>
        <div class="m" data-toggle="tooltip" data-placement="top" data-delay="500" title="" data-original-title="Draught">
          <span class="dra">Draught</span>{{this.boatInfo.draft}}{{this.boatInfo.unit}}</div>
        <div class="m" data-toggle="tooltip" data-placement="top" data-delay="500" title="" data-original-title="Size">
          <span class="len">Size</span> {{this.boatInfo.length}}{{this.boatInfo.unit}}</div>
      </div>
      <div class="summary-images">
        <Carousel>
          <Carousel-item>
            <div class="demo-carousel"><img v-bind:src="this.boatInfo.mainImg" width="600px" height="auto"></div>
          </Carousel-item>
          <template v-for="boatImg in this.boatInfo.attributeList">
            <Carousel-item>
              <div class="demo-carousel"><img v-bind:src="boatImg.value" width="600px" height="auto"></div>
            </Carousel-item>
          </template>
        </Carousel>
      </div>
      <div class="summary-desc" id="summary-desc">
        <h1>关于此产品</h1>
        <p>{{this.boatInfo.aboutBoat}}</p>
        <div class="detail-tech-spec">
          <h1>设施服务</h1>
          <row>
            <template v-for="group in getEquipments">
              <i-col span="4">
              <h2>{{ group.name }}</h2>
              <template v-for="item in group.dictItemList">
                <p> <Icon type="ios-checkmark-outline"></Icon>{{item.name}} </p>
              </template>
              </i-col>
            </template>
          </row>
        </div>

        <div class="detail-equipment-spec">
          <h1>详细参数</h1>
          <row>
            <i-col span="2">&nbsp;</i-col>
            <i-col span="11">
              <p>型号： {{this.boatInfo.model}}</p>
              <p>制造商： {{this.boatInfo.builder}}</p>
              <p>船身编号：{{this.boatInfo.hullNumber}}</p>
              <p>长度：{{this.boatInfo.boatSize}}{{this.boatInfo.unit}}</p>
              <p>宽度：{{this.boatInfo.width}}{{this.boatInfo.unit}}</p>
              <p>吃水：{{this.boatInfo.draft}}{{this.boatInfo.unit}}</p>
              <p>造价： {{this.boatInfo.boatValue}}</p>
            </i-col>
            <i-col span="11">
              <p>发动机品牌：{{this.boatInfo.engineBrand}}</p>
              <p>发动机型号：{{this.boatInfo.engineModel}}</p>
              <p>发动机制造商：{{this.boatInfo.engineMaker}}</p>
              <p>发动机数量：{{this.boatInfo.engineNum}}</p>
              <p>马力：{{this.boatInfo.power}}</p>
              <p>巡航速度：{{this.boatInfo.maxSpeed}}</p>
              <p>燃料：{{this.boatInfo.fuel}}</p>
              <p>油耗：{{this.boatInfo.oilConsume}}</p>

            </i-col>
          </row>
        </div>

        <div class="detail-equipment-spec">
          <h1>预订守则</h1>
          <row>
            <i-col span="2">&nbsp;</i-col>
            <i-col span="22">
              1、本产品至少提前25天预订，预订后请在24小时内，支付1000元订金；产品确认后，请在48小时内付全款。逾期将取消订单；<br>
              2、游艇配备1位船长+1位水手，请遵守船长的指挥；<br>
              3、海外游艇对使用时间有严格的限制，不可超时，也不可临时增加租赁时间，请谅解；<br>
              4、如遇天气原因，无法出船，我们会为您沟通协调相关事宜；<br>
              5、退变更：距离使用日期40天以上取消或变更，可全退；20天以上、40天及以下取消，收取50%违约金；20天及以下取消或变更，收取全款。<br>
            </i-col>
          </row>
        </div>

         <div class="detail-equipment-spec">
          <h1>码头位置</h1>
          <row>
            <i-col span="24">
              <gmap-map :center="locationCenter" :zoom="10"
                        @center_changed="updateCenter"
                        class="map-container">
                <gmap-circle :bounds="circleBounds" :center="locationCenter" :radius="8000" ></gmap-circle>
              </gmap-map>
            </i-col>
          </row>
        </div>

        <div class="detail-equipment-spec">
          <h1>周边的热门景点</h1>
          <row>
            <i-col span="24">
              <div class="brick-item">
                <div class="figure-img">
                  <a><img src="../../assets/slide_04.jpg" alt="棕榈海滩"  height="240"></a>
                </div>
                <h3 class="title">
                  <a href="#" >棕榈海滩</a>
                </h3>
                <p class="desc">。。。</p>
                <!--div class="review-wrapper">
                  <a href="#" >
                    <span class="review">独特的城市风貌，优美的自然风光，灿烂的历史和文化，显赫一时的比萨斜塔、佛罗伦萨、风光旖旎的水城威尼斯等，一直是旅行者们心醉不已的梦想之地。</span>
                  </a>
                </div-->
              </div>
            </i-col>
          </row>
          <row>
            <i-col span="24">
              <div class="brick-item">
                <div class="figure-img">
                  <a><img src="../../assets/slide_01.jpg" alt="香格里拉"  height="240"></a>
                </div>
                <h3 class="title">
                  <a href="#" >香格里拉</a>
                </h3>
                <p class="desc">。。。</p>
              </div>
            </i-col>
          </row>
          <row>
            <i-col span="24">
              <div class="brick-item">
                <div class="figure-img">
                  <a><img src="../../assets/slide_02.jpg" alt="碧海金沙"  height="240"></a>
                </div>
                <h3 class="title">
                  <a href="#" >碧海金沙</a>
                </h3>
                <p class="desc">。。。</p>
              </div>
            </i-col>
          </row>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
  export default {
    components: {
    },
    name: 'boat-detail-content',
    data () {
      return {
        touristNumber: [
          {
            value: '1',
            label: '1-3人'
          },
          {
            value: '2',
            label: '4-6人'
          },
          {
            value: '3',
            label: '7-10人'
          },
          {
            value: '4',
            label: '10-16人'
          },
          {
            value: '5',
            label: '17人以上'
          }
        ],
        touristNumModel: '',
        boatInfo: {},
        starRate: 3.5,
        equipmentCodeGroup: [],
        attributeImages: [],
        circleBounds: {},
        mapCenter: {
          lat: '',
          lng: ''
        },
        locationCenter: {
          lat: 31.13227755,
          lng: 121.87971954
        }
      }
    },
    computed: {
      getEquipments: function () {
        for (var j = 0; j < this.equipmentCodeGroup.length; j++) {
          for (var i = 0; i < this.equipmentCodeGroup[j].dictItemList.length; i++) {
            if (this.boatInfo.equips.toString().indexOf(this.equipmentCodeGroup[j].dictItemList[i].code) === -1) {
              this.equipmentCodeGroup[j].dictItemList.splice(i, 1)
            }
          }
        }
        return this.equipmentCodeGroup
      },
      boatImages: function () {
        this.attributeImages = this.boatInfo.attributeList
        for (var i = 0; i < this.boatInfo.attributeList.length; i++) {
          if (this.attributeImages[i].type !== 1) {
            this.attributeImages.splice(i, 1)
          }
        }
        return this.attributeImages
      }
    },
    methods: {},
    created () {
      this.equipmentCodeGroup.pop()
      this.$http.get('/meta/dict/group/info/digitalEquipment').then((response) => {
        this.equipmentCodeGroup.push(response.data.group)
      })
      this.$http.get('/meta/dict/group/info/kitchen').then((response) => {
        this.equipmentCodeGroup.push(response.data.group)
      })
      this.$http.get('/meta/dict/group/info/onUnderWater').then((response) => {
        this.equipmentCodeGroup.push(response.data.group)
      })
      this.$http.get('/meta/dict/group/info/navigation').then((response) => {
        this.equipmentCodeGroup.push(response.data.group)
      })
      this.$http.get('/meta/dict/group/info/sanitaryFacility').then((response) => {
        this.equipmentCodeGroup.push(response.data.group)
      })
      this.$http.get('/meta/dict/group/info/outdoorEquipment').then((response) => {
        this.equipmentCodeGroup.push(response.data.group)
      })
    },
    mounted () {
      this.$http.get('api/boat/info/' + this.$route.params.boatId).then((response) => {
        console.log(response.data)
        this.boatInfo = response.data.boat
      })
      var latlngArr = this.boatInfo.latlgt.split(',')
      this.mapCenter.lat = latlngArr[0]
      this.mapCenter.lng = latlngArr[1]
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .detail_header{
    with: 100%;
    min-height: 50px;
    background: #fff;
    border-bottom: 1px solid #dbdbdb;
    border-top: 1px solid #dbdbdb;
  }
  .detail_index_ul{
    font-size: 12px;
    font-weight: 300;
    font-color: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
  }
  .detail_index_ul li{
    float: left;
    list-style: none;
    padding-left: 20px;
    line-height: 50px;
  }
  @media screen and (min-width: 768px) {
    .book_it {
      position: relative;
      top: -50px;
      left: 760px;
    }
    .book_it_price {
      background-color: rgba(60, 63, 64, 0.9);
      border: 0 none;
      color: #fff;
      height: 50px;
      overflow-y: visible;
      padding: 13px 20px 5px;
      width: 315px;
      z-index: 1;
    }

    .book_it_price span {
      color: #ffffff;
      font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif;
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -0.2px;
      line-height: 28px;
      overflow-wrap: break-word;
    }
  }
  @media screen and (min-width: 0) and (max-width: 767px){
    .book_it {
      position: relative;
      top: -50px;
      left: 760px;
    }
    .book_it_price {
      background-color: rgba(60, 63, 64, 0.9);
      border: 0 none;
      color: #fff;
      height: 50px;
      overflow-y: visible;
      padding: 13px 20px 5px;
      width: 315px;
      z-index: 1;
    }

    .book_it_price span {
      color: #ffffff;
      font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif;
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -0.2px;
      line-height: 28px;
      overflow-wrap: break-word;
    }
  }
  .summary_info{
    display: block;
    background: #fff;
    position: absolute;
    top: 120px;
    padding-top: 30px;
    padding-bottom: 30px;
    width: 60%;
    overflow: hidden;
  }
  .summary-sku-name{
    font-size: 32px;
    margin-left: 20px;
    font-weight: 500;
    font-color: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
  }
  .summary-location{
    font-size: 12px;
    margin-left: 20px;
    font-weight: 300;
    font-color: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
  }

  .summary-specs{
    display: block;
    background: #fff;
    overflow: auto;
    margin: 20px 0 10px 20px;
  }
  .summary-specs .m {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #c5c5c5;
    display: block;
    float: left;
    font-size: 10px;
    margin-bottom: 15px;
    margin-right: 15px;
    overflow: hidden;
    padding: 1px 2px 2px;
    text-align: center;
    white-space: nowrap;
    width: 48px;
  }

  .summary-specs .m span {
    background: rgba(0, 0, 0, 0) url("../../assets/legend2.png") no-repeat scroll 0 0 / 285px 28px;
    border-bottom: 1px solid #c5c5c5;
    display: block;
    height: 32px;
    margin: 2px;
    overflow: hidden;
    text-indent: 50px;
    width: 40px;
  }

  .summary-specs .m .cab {
    background-position: -123px 0;
  }

  .summary-specs .m .ber {
    background-position: -41px 0;
  }

  .summary-specs .m .mot {
    background-position: -82px 0;
  }

  .summary-specs .m .dra {
    background-position: -163px 0;
  }

  .summary-specs .m .len {
    background-position: -203px 0;
  }
  .summary-images{
    margin-left: 20px;
    overflow: auto;
    display: block;
    width: 85%
  }
  .summary-desc{
    margin-left: 20px;
    padding-bottom: 30px;
    border-bottom: 1px solid #c5c5c5;
    width: 90%;
  }
  .summary-desc p{
    font-size: 16px;
    font-weight: 300;
    font-color: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
    margin-left: 10px;
  }
  .summary-desc h1{
    font-size: 20px;
    font-weight: 300;
    font-color: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
  }

  .summary-desc h2{
    font-size: 18px;
    font-weight: 300;
    font-color: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
  }

  .book_it_panel {
    min-height: 375px;
    background-color: #fff;
    border: 1px solid #dce0e0;
    border-radius: 0;
    width: 315px;
  }
  .book_it_panel_body {
    margin: 0;
    padding: 20px;
  }
  .button-submit {
    float: left;
    text-align: left;
    width: 100%;
    height: 40px;
    margin: 10px 0 0 0;
    max-height: 50px;
    padding: 0 1em;
    position: relative;
    background: #ff5a5f;
    border: 1px solid transparent;
    border-radius: 2px;
    box-shadow: 0 1px 0 0 #cb464d;
    color: #fff;
    overflow: visible;
  }

  .button-submit-orange {
    float: left;
    text-align: left;
    width: 100%;
    height: 40px;
    margin: 10px 0 0 0;
    max-height: 50px;
    padding: 0 1em;
    position: relative;
    background: #4c4c4c;
    border: 1px solid transparent;
    border-radius: 2px;
    box-shadow: 0 1px 0 0 #4c4c4c;
    color: #fff;
    overflow: visible;
  }
  .detail-tech-spec{
    border-top: 1px solid #dbdbdb;
    margin-top: 20px;
    display: table;
    min-height: 300px;
    width: 100%;
  }

  .book_it_price_total{
    display: block;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #dbdbdb;
    overflow: hidden;
  }
  .book_it_price_total_left{
    display: block;
    float: left;
  }

  book_it_price_total_left a{!important
    color: #ff5a5f;
    font-weight: bolder;
    font-size: 16px;
  }
  .book_it_price_total_right{
    display: block;
    float: right;
  }
  .book_it_price_total_right a{
    color: #ff5a5f;
    font-weight: bolder;
    font-size: 16px;
  }
  .book_it_demons{
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #dbdbdb;
  }
  .detail-equipment-spec{
    margin-top: 10px;
    border-top: 1px solid #dbdbdb;
  }

  .brick-item {
    background: #fff none repeat scroll 0 0;
    float: left;
    height: 300px;
    margin-bottom: 14px;
    margin-left: 14px;
    padding: 14px 0 20px;
    position: relative;
    transition: all 0.2s linear 0s;
    width: auto;
    z-index: 1;
  }

  .brick-item .figure-img {
    height: 240px;
    margin: 0 auto 18px;
    width: auto;
  }

  .brick-item .title, .brick-item .title a {
    color: #333;
  }

  .brick-item .title {
    font-size: 14px;
    font-weight: 400;
    margin: 0 10px;
    text-align: center;
  }

  .brick-item .desc {
    color: #b0b0b0;
    font-size: 12px;
    height: 18px;
    margin: 0 10px 10px;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .brick-item .review-wrapper a {
    display: block;
    outline: 0 none;
    padding: 8px 30px;
  }

  .brick-promo-list a {
    display: block;
    height: 100%;
    width: 100%;
  }
  .brick-promo-list . img {
    height: 614px;
  }

  .map-container {
    width: 100%;
    height: 300px;
  }
</style>
